<template>
    <!-- sku弹窗组件 -->
    <vk-data-goods-sku-popup 
      v-model="isShowSku"
      :mask-close-able="false"
      :localdata="goodsSkuList"
      :mode="mode"
      :actived-style="{
        color: '#008000',
        borderColor: '#008000',
        backgroundColor: '#D1F7D1'
      }"
      ref="goodsSkuPoup"
      @add-cart="onAddCart"
      @buy-now ="onBuyNow"
      />
    
      <!-- 滚动区域开始 -->
    <z-paging
      ref="paging"
      @scroll="handleScroll"
      :scroll-with-animation="true"
      class="goods-detail-container"
    >
      <uv-skeletons :loading="isShowSkeleton" :skeleton="skeleton"></uv-skeletons>

      <!-- 商品相册区域开始 -->
      <Album :goodsAlbumList="goodsAlbumList"/>
      <!-- 商品相册区域结束 -->

      <!-- 价格区域开始 -->
      <view class="price-wrap">

        <view class="price-box">
          <text class="symbol">￥</text>
          <text class="num">{{ (goodsInfo.price/100).toFixed(2) }}</text>
        </view>


        <view class="market-price-box">
          <text class="num">￥{{ (goodsInfo.market_price/100).toFixed(2) }}</text>
        </view>


      </view>
      <!-- 价格区域结束 -->

      <!-- 商品名称区域开始 -->
      <view class="goods-name-wrap">
        <view class="goods-name">{{ goodsInfo.name }}</view>
        <view class="goods-collect" @click="handleCollect">
          <template v-if="!isCollect">
            <text class="icon iconfont icon-shoucang1"></text>
            <text class="collect-txt">收藏</text>
          </template>
          <template v-else>
            <text class="icon iconfont icon-shoucang"></text>
            <text class="collect-txt active">已收藏</text>
          </template>
        </view>
      </view>
      <!-- 商品名称区域结束 -->

      <!-- 商品描述区域开始 -->
      <view class="goods-intro">
        <text class="title">描述:</text>
        <text v-if="goodsInfo.descibe" class="content">{{ goodsInfo.descibe.replace(/<.*?>/ig, "") }}</text>
      </view>
      <!-- 商品描述区域结束 -->

      <!-- 操作面板区域开始 -->
      <view class="panel-wrap">
        <!-- 收货地址区域开始 -->
        <view class="panel-item">
          <text class="title">送至</text>
          <view class="value" @click="openService('address')">
            <text class="txt ellipsis" v-if="userStore.deliveryAddr.id"> {{ userStore.deliveryAddr.region }} {{ userStore.deliveryAddr.address }} </text>
            <text class="txt" v-else>请选择收货地址</text>
            <text class="icon iconfont icon-youjiantoucu"></text>
          </view>
        </view>
        <!-- 收货地址区域结束 -->

        <!-- 服务区域开始 -->
        <view class="panel-item" @click="openService('service')">
          <text class="title">服务</text>
          <view class="value">
            <text class="txt">无忧退 快速退款 免费包邮</text>
            <text class="icon iconfont icon-youjiantoucu"></text>
          </view>
        </view>
        <!-- 服务区域结束 -->
      </view>
      <!-- 操作面板区域结束 -->

      <!-- 评价区域开始 -->
      <view class="evaluate-wrap">
        <!-- 评价标题区域开始 -->
        <view class="title-wrap">
          <text class="txt">宝贝评价({{ goodsEvaluateTotal }})</text>
          <view class="more-wrap" @click="goto()">
            <text class="txt">查看全部</text>
            <text class="icon iconfont icon-youjiantoucu"></text>
          </view>
        </view>
        <!-- 评价标题区域结束 -->

        <!-- 评价内容区域开始 -->
        <view class="content-wrap">
          <view class="content-item" v-for="(item, index) in goodsEvaluateList" :key="index">
            <!-- 用户信息区域开始 -->
            <view class="user-wrap">
              <image class="user-avatar" v-if="item.avatar_url != ''" :src="global.FILE_DOMAIN + item.avatar_url"/>
              <image class="user-avatar" v-else src="/static/images/avatar.png"/>
              <view class="right">
                <view class="username">{{ item.username ? item.username : '匿名买家'}}</view>
                <view class="create_time">{{ item.create_time }}</view>
              </view>
            </view>
            <!-- 用户信息区域结束 -->

            <!-- 评价信息区域开始 -->
            <view class="content">
              <text class="txt">{{ item.contents }}</text>
              <!-- 评价图片区域开始 -->
              <view class="evaluate-image-wrap" v-if="item.image_url">
                <view class="evaluate-item" v-for="(image_url, index) in item.image_url_items" :key="index">
                  <image class="evaluate-image" :src="global.FILE_DOMAIN + image_url"/>
                </view>
              </view>
              <!-- 评价图片区域结束 -->
            </view>
          </view>
        </view>
        <!-- 评价内容区域结束 -->
      </view>
      <!-- 评价区域结束 -->

      <!-- 商品详情区域开始 -->
      <view class="detail-wrap">
        <view class="title">
          <text>宝贝详情</text>
        </view>
        <view class="content">
          <image class="img" :src="global.FILE_DOMAIN + item.image_url"  v-for="(item, index) in goodsAlbumList" :key="index" mode="scaleToFill"/>
        </view>
      </view>
      <!-- 商品详情区域结束 -->

      <!-- 同类推荐区域开始 -->
      <view class="recommend-wrap">
        <!-- 同类推荐标题区域开始 -->
        <view class="title">
          <text>同类推荐</text>
        </view>
        <!-- #ifdef H5 -->
        <view class="content">
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="content" :style="{ marginBottom: safeAreaInsets?.bottom + 110 + 'rpx' }">
        <!-- #endif -->
          <TridentFreshGoodsItem v-for="(item, index) in similarRecommendGoodsList" :key="index" :goods="item"/>
        </view>
      </view>
      <!-- 同类推荐区域结束 -->

      <!-- 操作区域开始 -->
      <view class="detail-option-wrap" :style="{ paddingBottom: safeAreaInsets?.bottom + 'rpx' }">
        <uni-goods-nav :options="options" :fill="true" @click="onClick" @buttonClick="buttonClick" />
      </view>
      <!-- 操作区域结束 -->
    </z-paging>

    <!-- 返回顶部 -->
    <TridentFreshBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>

    <!-- 弹层 -->
    <uni-popup
      ref="popup"
      type="bottom"
      background-color="#fff"
      :mask-click="false"
    >
      <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />
      <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, inject, reactive, computed } from "vue";
import { onShow } from '@dcloudio/uni-app'
import { useUserStore, useCartStore, useOrderStore } from '@/stores'

// 导入组件
import Album from './components/Album.vue'
import AddressPanel from './components/AddressPanel.vue'
import ServicePanel from './components/ServicePanel.vue'

// 导入接口
import { reqGetGoodsDetailAPI, reqGetGoodsListAPI } from '@/apis/goods'
import { reqGoodsEvaluateListAPI } from '@/apis/goodsEvaluate'
import { reqAddUserGoodsCollectAPI, reqCancelUserGoodsCollectAPI, reqUserGoodsCollectListAPI } from '@/apis/goodsCollect'
import { reqAddUserGoodsFollowAPI, reqCancelUserGoodsFollowAPI, reqUserGoodsFollowListAPI } from '@/apis/goodsFollow'



// ------------------- 定义全局变量开始 -------------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()


// 获取页面参数
const query:any = defineProps({
    "id": {
        type: String,
        default: ''
    }
})

// 全局属性
const global:any = inject('global')

// 用户存储
const userStore = useUserStore()

// 购物车存储
const cartStore = useCartStore()

// 订单存储
const orderStore = useOrderStore()

const paging:any = ref(null)
// ----------------- 定义全局变量结束 -----------------



// ----------------- 返回顶部功能开始 -----------------

// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
    paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
    isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// ----------------- 返回顶部功能结束 -----------------



// ----------------- 地址+服务功能开始 -----------------
const popup = ref()
// 弹出层条件渲染
const popupName = ref()
const openService = (name:any) => {
  // 修改弹出层名称
  popupName.value = name
  popup.value.open()
}
// ----------------- 地址+服务功能结束 -----------------



// ----------------- 定义骨架变量开始 -----------------
// 定义是否显示骨架
const isShowSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive([
    {
      type: 'custom',
      num: 1,
      style: 'height: 750rpx',
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'height:50rpx;width:200rpx;margin-right:20rpx',
            },
            {
                type: 'line',
                num: 1,
                style: 'width: 30%',
            }
        ]
    },
    20,
    {
        type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
            {
                type: 'custom',
                num: 1,
                style: 'height:100rpx;width:610rpx;margin-right:20rpx',
            },
            {
                type: 'custom',
                num: 1,
                style: 'height:100rpx;width:100rpx;',
            },
        ]
    },
    20,
    {
      type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
          {
            type: 'line',
            num: 1,
            style: 'width: 50%;',
          }
        ]
    },
    20,
    {
      type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
          {
            type: 'line',
            num: 2,
            style: 'height:80rpx',
          }
        ]
    },
    20,
    {
      type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
          {
            type: 'line',
            num: 1,
            style: 'height:60rpx;width:80%',
          },
          {
            type: 'line',
            num: 1,
            style: 'height:60rpx;width:80%',
          }
        ]
    },
    20,
    {
      type: 'flex',
        num: 1,
        style: 'padding:0 10rpx;',
        children: [
          {
            type: 'line',
            num: 1,
            style: 'height:60rpx;width:40%',
          }
        ]
    },
    10,
    {
      type: 'custom',
      num: 1,
      style: 'height: 750rpx',
    }
])
// ------------------ 定义骨架变量结束 ------------------



// ------------------ 跳转商品评价列表 ------------------
const goto = () => {
  uni.navigateTo({url: '/pagesGoods/goods_evaluate/index?goods_id='+query.id})
}



onShow(async() => {
  uni.pageScrollTo({scrollTop:0, duration:1})
  await getGoodsDetail()
  await Promise.all([
    getSimilarRecommendGoods(),
    // 获取用户收藏商品
    getUserGoodsCollectList(),
    // 获取用户关注商品
    getUserGoodsFollowList(),
    // 商品评价
    getGoodsEvaluateList()
  ])
})


// ------------------ 收藏商品功能开始 ------------------
// 获取用户收藏商品信息，用于判断该商品是否被用户收藏过
const isCollect = ref(false)
const collectId = ref(0)
const getUserGoodsCollectList = async () => {
  const result:any = await reqUserGoodsCollectListAPI({goods_id: goodsInfo.value.id, page_size: -1})
  isCollect.value = result.data.total > 0 ? true : false
  collectId.value = result.data.total > 0 ? result.data.user_goods_collects[0].id : 0
}

// 延时器
const timer:any = ref(null)

const handleCollect = async () => {
  // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(timer.value)
	// 重新启动延时器
	timer.value = setTimeout( async () => {
		if (isCollect.value) {
      await reqCancelUserGoodsCollectAPI(collectId.value)
      uni.showToast({
        title: '取消收藏成功',
        duration: 1000
      })
      
      isCollect.value = false
    } else {
      const result:any = await reqAddUserGoodsCollectAPI(goodsInfo.value.id)
      collectId.value = result.data.id
      uni.showToast({
        title: '收藏成功',
        duration: 1000
      })
      
      isCollect.value = true
    }
	}, 300)
}
// ------------------ 收藏商品功能结束 ------------------



// ------------------ 商品SKU功能开始 ------------------
// 是否显示SKU弹窗
const isShowSku = ref(false)

const mode = ref(1)

const goodsSkuPoup = ref()

// 选择商品SKU
const selectGoodsSku = (m:any) => {
  mode.value = m
  isShowSku.value = true
}

// // 选中的商品SKU规格文本
// const selectedGoodsSkuOptText = computed(() => {
//   return goodsSkuPoup.value?.selectArr?.join(' ').trim() || "请选择商品规格"
// })
// ------------------ 商品SKU功能结束 ------------------



// -------------------- 操作功能开始 -------------------
// 定义操作配置
const options:any = reactive([
  {
    icon: 'chat',
    text: '客服'
  }, 
  {
    // heart-filled
    icon: 'heart',
    text: '关注',
    infoBackgroundColor: '#007aff',
    infoColor: "#f5f5f5"
	}, 
  {
    icon: 'cart',
    text: '购物车',
    info: cartStore.validTotal
  }
])

// 点击客服,关注,购物车开始
const onClick = (e:any) => {
  if (e.index == 0) { // 客服
    
  } else if (e.index == 1) { // 关注
    handleGoodsFollow()
  } else if (e.index == 2) { // 查看购物车
    uni.navigateTo({ url: '/pages/cart/cart_shadow' })
  }
}

// 点击添加购物车、立即购买操作
const buttonClick = (e:any) => {
  if (e.index == 0) { // 加入购物车
    selectGoodsSku(2)
  } else if(e.index == 1) { // 立即购买
    selectGoodsSku(3)
  }
}
// -------------------- 操作功能结束 -------------------



// ------------------- 关注功能开始 -------------------
// 定义是否关注变量
const isFollow = ref(false)

// 定义关注商品ID
const goodsFollowId = ref(0)

// 获取关注商品
const getUserGoodsFollowList = async () => {
  const result:any = await reqUserGoodsFollowListAPI({goods_id: goodsInfo.value.id})
  if (result.data.total > 0) {
    isFollow.value = true
    options[1].icon = 'heart-filled'
    options[1].text = '已关注'
    goodsFollowId.value = result.data.user_goods_follows[0].id
  }
}

// 延时器
const followTimer:any = ref(null)

// 处理商品关注
const handleGoodsFollow = async () => {
    // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(followTimer.value)
	// 重新启动延时器
	followTimer.value = setTimeout( async () => {
    if (isFollow.value) { // 取消关注
      await reqCancelUserGoodsFollowAPI(goodsFollowId.value)
      uni.showToast({
        title: '取消关注成功',
        duration: 1000
      })

      isFollow.value = false
      options[1].icon = 'heart'
      options[1].text = '关注'
    } else {
      const result:any = await reqAddUserGoodsFollowAPI(goodsInfo.value.id)
      uni.showToast({
        title: '关注成功',
        duration: 1000
      })

      options[1].icon = 'heart-filled'
      options[1].text = '已关注'
      isFollow.value = true
      goodsFollowId.value = result.data.id
    }
  }, 300)
}


// ------------------- 关注功能结束 -------------------



// ---------------- 加入购物车功能开始 -----------------
const onAddCart = async (e:any) => {
  await cartStore.addCart({
    goods_id: goodsInfo.value.id,
    goods_sku_id: e._id,
    num: e.buy_num,
    inventory_num: e.stock,
    new_price: e.price,
    goods: {
      name: goodsInfo.value.name,
      cover_url: e.img,
      price: e.price,
    },
    goods_sepc_option_text: e.sku_name_arr.join(' '),
    is_checked: 1,
    is_effective: 1, // 是否有效
  })

  // 关闭SKU弹窗
  isShowSku.value = false
  
  uni.showToast({
    title: '添加购物车成功',
    duration: 1000
  })

  options[2].info = cartStore.validTotal  
}
// ----------------- 加入购物车功能结束 -----------------



// ------------------ 直接购买功能开始 ------------------
const onBuyNow = (e:any) => {
  // 组装生成订单参数
  const createOrderParams = {
    goods_id: goodsInfo.value.id,
    cover_url: e.image,
    name: goodsInfo.value.name,
    goods_sku_id: e._id,
    goods_sepc_option_text: e.sku_name_arr.join(' '),
    price: e.price,
    inventory_num: e.stock,
    num: e.buy_num,
  }
	
  orderStore.setCreateOrderParams(createOrderParams)
  isShowSku.value = false
  uni.navigateTo({
		url: '/pagesOrder/confirm_order/index?mode=1'
	})
}
// ------------------ 直接购买功能结束 ------------------



// ---------------- 获取商品信息功能开始 ----------------
// 商品信息
const goodsInfo:any = ref({})

// 商品属性
const goodsAttributeList = ref([])

// 最大显示商品属性数量
const maxShowGoodsAttributeNum = ref(5)

// 商品相册
const goodsAlbumList:any = ref([])

// 商品SKU列表
const goodsSkuList = ref({})

// 获取商品信息
const getGoodsDetail = async () => {
  // 显示骨架
  isShowSkeleton.value = true

  // 请求商品数据
  const result:any = await reqGetGoodsDetailAPI(query.id)

  // 商品信息
  goodsInfo.value = result.data.goods

  // 商品相册
  goodsAlbumList.value = result.data.goods_albums != null ? result.data.goods_albums : []
  
  // 商品属性
  goodsAttributeList.value = result.data.goods_attributes != null ? result.data.goods_attributes : []
  
  // 商品SKU
  let goodsSkus = result.data.goods_skus != null ? result.data.goods_skus.filter((item:any) => item.inventory_num > 0 && item.status == 1) : []

  // 商品选项
  let goodsOptions = result.data.goods_options != null ? result.data.goods_options.reverse() : []
  
  // 组装商品SKU列表
  goodsSkuList.value = {
    _id: result.data.goods.id,
    name: result.data.goods.name,
    goods_thumb: global.FILE_DOMAIN + result.data.goods.cover_url,
    // sku_name_arr的数据顺序一定要和spec_list的数据顺序一致，坑坑坑的一逼
    // sku_name_arr ['荔枝纹杏色5.5cm', '38'] 与 spec_list {name: '颜色分类', list: Array(1)}{name: '尺码', list: Array(1)}
    sku_list: goodsSkus.map((item:any) => {
        // 如果商品SKU没有图片则使用商品封面图片
        let imgUrl =  item.img_url ? item.img_url : result.data.goods.cover_url
        return {
          _id: item.id,
          goods_id: item.goods_id,
          goods_name: result.data.goods.name,
          image: global.FILE_DOMAIN + imgUrl,
          img: imgUrl,
          price: item.price,
          sku_name_arr: item.spec_option_value_items,
          stock: item.inventory_num,
        }
    }),
    spec_list: goodsOptions.map((item:any) => {
      let valueList:any = []
      let values = item.value.split(',')
      values.forEach((v:any) => {
        valueList.push({name: v})
      });
      return {
        name: item.name,
        list: valueList
      }
    }),
  }

  // 隐藏骨架
  isShowSkeleton.value = false
}
// ---------------- 获取商品信息功能结束 ----------------



// -------------- 获取同类推荐商品功能开始 --------------
const similarRecommendGoodsList = ref([])
const getSimilarRecommendGoods = async () => {
  const result:any = await reqGetGoodsListAPI({cid: goodsInfo.value.cid, page_size: 8})
  similarRecommendGoodsList.value = result.data.goods != null ? result.data.goods : []

  similarRecommendGoodsList.value.forEach((item:any) => {
        item.name = item.goods_name
        item.original_price = item.market_price
        item.image_url = item.cover_url
    })
}
// -------------- 获取同类推荐商品功能结束 --------------



// ------------------- 评价功能开始 --------------------
// 商品评价列表
const goodsEvaluateList:any = ref([])

// 商品评价总数
const goodsEvaluateTotal = ref(0)

const getGoodsEvaluateList = async () => {
  const result:any = await reqGoodsEvaluateListAPI({goods_id: query.id, status: 1, page_size: 2})
  goodsEvaluateList.value = result.data.goods_comments != null ? result.data.goods_comments : []
  goodsEvaluateTotal.value = result.data.total
}
// ------------------- 评价功能结束 --------------------
</script>

<style lang="scss">
.goods-detail-container {
  padding-bottom: 80rpx;
  /* 价格区域开始 */
  .price-wrap {
    background-color: #008000;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 30rpx;

    display: flex;

    .price-box {
      color: #fff;
      
      .symbol {
        font-size: 24rpx;
      }
      .num {
        font-size: 40rpx;
      }
    }

    /* 市场价 */
    .market-price-box {
      padding-top: 5rpx;
      padding-left: 20rpx;
      color: #ccc;
      text-decoration: line-through;
    }
  }

  /* 商品名称区域开始 */
  .goods-name-wrap {
    background-color: #fff;
    padding: 10rpx 10rpx 0 10rpx;
    display: flex;
    align-items: center;

    .goods-name {
      font-size: 30rpx;
      border-right: 4rpx solid #ccc;
      flex: 1;
      padding-right: 10rpx;
      font-weight: bold;
    }
    .goods-collect {
      width: 100rpx;
      padding-left: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        font-size: 50rpx;
        color: #ccc;
      }
      .collect-txt {
        font-size: 24rpx;
        margin-top: 6rpx;
      }
      .icon-shoucang {
        color: #CD0011;
      }
      .active {
        color: #CD0011;
      }
    }
  }

  // 商品介绍
  .goods-intro {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20rpx 10rpx;
    font-size: 24rpx;
    display: flex;
    color: #ccc;
    .title {
      font-size: 24rpx;
      width: 80rpx;
    }
    .content {
      flex: 1;
    }
  }

  /* 操作面板区域开始 */
  .panel-wrap {
    background-color: #fff;
    .panel-item {
      display: flex;
      justify-content: space-between;
      border-top: 2rpx solid #ccc;
      padding: 20rpx 10rpx;
      font-size: 24rpx;
      .title {
        color: #898B94;
      }
      .value {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-left: 20rpx;
        .icon {
          color: #ccc;
        }
      }
    }
  }

  /* 评价区域开始 */
  .evaluate-wrap {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 0 10rpx;
    /* 评价标题区域开始 */
    .title-wrap {
      height: 80rpx;
      line-height: 80rpx;
      border-left: 6rpx solid #008000;
      padding-left: 10rpx;
      font-weight: bold;

      display: flex;
      justify-content: space-between;
      .more-wrap {
        color: #008000;
        font-weight: 100;
        font-size: 24rpx;
        .icon {
          font-size: 24rpx;
        }
      }
    }

    // 评价内容区域开始
    .content-wrap {
      margin-top: 10rpx;
      .content-item {
        border-top: 2rpx solid #ccc;
        padding: 20rpx 0;
        .user-wrap {
          display: flex;
          align-items: center;
          .user-avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
          }
          .right {
            padding-left: 10rpx;
            font-size: 24rpx;
            .create_time {
              color: #ccc;
            }
          }
        }

        // 评价内容
        .content {
          padding-top: 10rpx;
          color: #898B94;
          font-size: 26rpx;
          .evaluate-image-wrap {
            margin-top: 20rpx;
            display: flex;
            .evaluate-item {
              width: 25%;
              height: 160rpx;
              padding-right: 8rpx;
              &:nth-child(4n) {
                padding-right: 0;
              }
              .evaluate-image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  // 商品详情区域开始
  .detail-wrap {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 0 10rpx;
    .title {
      border-left: 6rpx solid #008000;
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 10rpx;
      font-size: 32rpx;
    }
    .content {
      margin-top: 10rpx;
      display: flex;
      flex-direction: column;
      .img {
        width: 100%;
        height: 750rpx;
      }
    }
  }

  // 同类推荐区域开始
  .recommend-wrap {
    margin-top: 30rpx;
    padding: 0 10rpx;
    .title {
      border-left: 6rpx solid #008000;
      background-color: #fff;
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 10rpx;
      margin-top: 20rpx;
      font-size: 32rpx;
    }
    .content {
      padding: 0 0 1rpx 0;
      display: flex;
      flex-wrap: wrap;
      /* #ifdef H5 */
      margin-bottom: 30rpx;
      /* #endif */

      /* #ifndef H5 */
      margin-bottom: 110rpx;
      /* #endif */
    }
  }

  // 操作区域开始
  .detail-option-wrap {
    background-color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    ::v-deep(.uniui-heart-filled) {
      color: #CD0011 !important;
    }
  }
}
</style>